<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>动力金融网-CFCA认证的互联网金融公司</title>
<script type="text/javascript" th:src="@{/js/jquery-1.7.2.min.js}"></script>
<script type="text/javascript" th:src="@{/js/trafficStatistics.js}"></script>
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/share.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" />

</head>

<body>
<div id="header">
<!--<jsp:include page="commons/header.jsp"/>-->
    <div th:include="commons/header :: html"></div>
</div>

<!--散标投资 begin-->
<div id="sbtz" class="invest-details">

<!--页中begin-->
<div class="mainBox pro-details-body">
  <div class="homeWap clearfix" id="huacengPar">
    <div class="pro-details-left">
      
      <!-- 产品详情start -->
      <div class="pro-info-details">
        <div class="pro-name">
          <h2><span th:text="|${loanInfo.productName}(${loanInfo.productNo})期|">季度宝 (20170726期)</span></h2>
        </div>
        <div class="pro-info">
          <ul class="clearfix">
            <li class="info-1">
              <p>历史年化利率</p>
              <h3 th:text="|${loanInfo.rate}%|">4.9%</h3>
              <div class="info-bt">
              <span>本产品采用普通利率</span>
              </div>
            </li>
            <li class="info-2">
              <p>募集金额(元)</p>
              <h3 th:text="${loanInfo.productMoney}">500000.0</h3>
              <div class="info-bt">
                  <!-- 只有状态为0时为募集，其它都为已满标 -->
              	<span th:if="${loanInfo.leftProductMoney}>0">
              		<span th:text="|募集中,剩余募集金额${loanInfo.leftProductMoney}元|">
                        募集中,剩余募集金额 500000.0元
                    </span>
              	</span>
                  <!-- 已满标 -->
                  <span th:if="${loanInfo.leftProductMoney}==0">
              		已满标
              	  </span>
              </div>
            </li>
            <li class="info-3">
              <p>投资周期</p>
              <!-- 只有新手宝产品周期为天 -->
                <span th:if="${loanInfo.productType}==0">
                    <h3 th:text="|${loanInfo.cycle}天|">6个月</h3>
                </span>
                <span th:unless="${loanInfo.productType}==0">
                    <h3 th:text="|${loanInfo.cycle}个月|">6个月</h3>
                </span>
              <div class="info-bt"><span></span></div>
            </li>
          </ul>
        </div>
        <dl class="pro-syfs">
          <dt><span>收益获取方式</span></dt>
          <dd><span>收益返还：</span>到期还本付息</dd>
        </dl>
      </div>
      <!-- 产品详情end -->
      
      <!-- 投资记录start -->
      <div class="pro-details-cnt">
        <ul class="tabNav clearfix">
          <li><a id="one3" href="javascript:void(0);" class="s">投资记录</a></li>
        </ul>
        
        <div class="invest-record" id="con_one_3" style="display:block">
        <div class="vertical-side">投资列表</div>
		<dl class="record-list">
		<dt>
			<span class="record-num">序号</span><span class="invest-user">投资人</span><span class="invest-money">投资金额(元)</span><span class="invest-time">投资时间</span>
		</dt>

            <!-- 如果有投资记录，循环遍历显示 -->
            <div th:each="bidInfo:${bidInfos}">
                <!-- 如果投资记录为空，显示以下文字 -->
                <div th:if="${bidInfos}==null">
                    该产品暂时还没有人投资，赶快去投资吧~
                    <dd style="text-align:center;">该产品暂时还没有人投资，赶快去投资吧~</dd>
                </div>
                <div th:unless="${bidInfos}==null">
                    <dd>
                        <span class="record-num" th:text="${bidInfoStat.count}">1</span>
                        <span class="invest-user" th:text="${#strings.substring(bidInfo.user.phone,0,3)+'*****'+#strings.substring(bidInfo.user.phone,bidInfo.user.phone.length()-3)}" >137******89</span>
                        <span class="invest-money" th:text="${bidInfo.bidMoney}">1000.0</span>
                        <span class="invest-time" th:text="${#dates.format(bidInfo.bidTime,'yyyy-MM-dd HH:mm:ss')}" >2017-09-12 13:34:22</span>
                    </dd>
                </div>
            </div>

            <!--页码 start-->
            <table class="page_bar">
                <tbody>
                <tr>
                    <td>
                        共20条3页　当前为第2页　
                        <a id="linkHomePage" href="javascript:void(0)">首页</a>
                        <a id="linkPreviousPage" href="javascript:void(0)">上一页</a>
                        <a id="linkNextPage" href="javascript:void(0)">下一页 </a>
                        <a id="linkLastPage" href="javascript:void(0)">尾页</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--页码 end-->

		</dl>
		</div>
      </div>
      <!-- 投资记录end -->
    </div>
    
    <!--页面右侧begin-->
    <div class="pro-details-right">
      <div class="right-calculator" id="huaceng">
        <div class="calculator-cnt">
          <h2>立即投资</h2>
          <dl class="profits-mode">
            <dt>收益获取方式</dt>
            <dd class="clearfix"><span id="fanhuan"><em>到期还本付息</em></span></dd>
          </dl>
          <dl class="usable">
            <dt>我的账户可用</dt>
            <dd>资金(元)：
            
	            	<!-- 判断用户是否登录：未登录，显示登录连接 -->
	            	<span style="font-size:18px;color:#ff6161;vertical-align:bottom;"><a th:href="@{/loan/page/login}">请登录</a></span>
	        
	            	<!-- 判断用户是否登录：已登录，显示可用余额 -->
	           		<!--<span style="font-size:18px;color:#ff6161;vertical-align:bottom;">1,000,12 元</span>-->
	        
            </dd>
          </dl>
          <div class="expect-box">
            <div class="expect-money">预计本息收入(元)：<span id="shouyi" class="money"></span><span class="prompt" style="display:block;">请在下方输入投资金额</span></div>
            <input type="text" id="bidMoney" name="bidMoney" onblur="checkMoney();" placeholder="请输入投资金额，应为100元的整倍数" maxlength="9"/>
            <div class="max-invest-money" id="max-invest-money"></div>
          </div>
          <div class="invest-btn">
          	<a id="investNow" href="javascript:void(0)" class="btn-1" onclick="invest();">立即投资</a>
          </div>
          <input type="hidden" id="loanId" name="loanId" value="${loanInfo.id}"/>
        </div>
      </div>
    </div>
    <!--页面右侧end-->
  </div>
</div>
<!--页中end-->

</div>
<!--散标投资 end-->

<!-- 隐藏域 获取session用户的信息，用于下面是否登录的判断 -->
<input type="hidden" id="login_user" th:value="${session.login_user}" />
<div th:if="${session.login_user}!=null">
    <input type="hidden" id="login_user_name" th:value="${session.login_user.name}" />
</div>

<!--遮罩层-->
<div class="dialog-overlay" id="dialog-overlay1" style="display:none;"></div>

<!--投资成功浮层start-->
<div class="layer-body failureSuccess failurePayment" id="failurePayment" style="display:none;width:500px;height:100px;top:75%;">
  <a class="layer-close" href="javascript:closeit();"></a>
  <div style="background:#f2f2f2; line-height:105px;text-align:center;"><font style="font-size:25px;">投资成功</font></div>
</div>
<!--投资成功浮层end-->

<!--页脚start-->
<jsp:include page="commons/footer.jsp"/>
<!--页脚end-->

<script type="text/javascript">
function closeit() {
	$("#failurePayment").hide();
	$("#dialog-overlay1").hide();
	window.location.href=rootPath+"/loan/page/myCenter";
}
</script>

<script th:inline="javascript">

    //计算利息前 先获取一些需要的值
    var loanId = [[${loanInfo.id}]];
    var rate = [[${loanInfo.rate}]];
    var cycle = [[${loanInfo.cycle}]];
    var productType = [[${loanInfo.productType}]];

    //最低投资  最高投资
    var bidMinLimit = [[${loanInfo.bidMinLimit}]];
    var bidMaxLimit = [[${loanInfo.bidMaxLimit}]];
    //剩余可投资金额
    var leftProductMoney = [[${loanInfo.leftProductMoney}]];

    //在文本框输入钱数 算出利息
    function checkMoney() {
       // alert(1234);
        var bidMoney = $("#bidMoney").val(); //这个bidMoney获得的是字符串类型
        $("#max-invest-money").html("");
        //判断输入的金额不能为空
        if ( bidMoney==null || bidMoney==""){
            $("#max-invest-money").html("请输入金额...");
            return;
        }
        //判断输入的金额不能为负数
        if(window.parseInt(bidMoney) <0 ){
            $("#max-invest-money").html("输入的金额必须大于零...");
            return;
        }

        //判断输入的金额必须要大于100元
        //先把字符串类型的bidMoney转换成了int类型，防止在不同的浏览器发送错误，不能解析
        if(window.parseInt(bidMoney) < 100 ){
            $("#max-invest-money").html("输入的金额必须大于100元...");
            return;
        }

        //判断输入的金额必须为100的整数倍(取模有余数的话 说明不是整数倍)
        if(window.parseInt(bidMoney)%100 > 0  ){
            //alert(window.parseInt(bidMoney)%100);
            $("#max-invest-money").html("输入的金额必须是100元的整数倍...");
            return;
        }

        //输入本金 计算出年化利率收益金额
        var shouyi = 0;
        //收益 = 输入的金额 *  年化利率/100/365 * 周期
        if(productType==0){
            shouyi = window.parseInt(bidMoney)*rate/365/100*cycle ;
        }else {
            shouyi = window.parseInt(bidMoney)*rate/365/100*cycle*30 ;
        }
        $("#shouyi").html(shouyi.toFixed(2));
        return true;
    }

    //输入金额 进行投资功能的实现
    function invest() {
        // alert(123);
        //先判断输入的金额是否满足投资的条件
        var bidMoney=$.trim($("#bidMoney").val());
        $("#max-invest-money").html("");
        //投资的金额不能少于最少投资金额
        if (window.parseInt(bidMoney)<bidMinLimit){
            $("#max-invest-money").html("投资单笔金额不能小于"+bidMinLimit+"元");
            return;
        }
        //投资的金额不能大于最大投资金额
        if (window.parseInt(bidMoney)>bidMaxLimit){
            $("#max-invest-money").html("投资单笔金额不能大于"+bidMaxLimit+"元");
            return;
        }

        //还需要验证登录(可以通过判断是否有userId)
        var login_user=$.trim($("#login_user").val()); //获得的都是字符串 可以先去除空格
        if (login_user == null||login_user==""){
            //登录之后还要回到该页面
            $("#max-invest-money").html("请先登录 <a style='color: blue' href='"+rootPath+"/loan/page/login?ReturnUrl="+window.location.href+"'>登录</a>");
            return;
        }

        //验证是否完成了实名认证
        var login_user_name = $.trim($("#login_user_name").val());
        if (login_user_name == null||login_user_name==""){
            $("#max-invest-money").html("请先完成实名认证 <a style='color: blue' href='"+rootPath+"/loan/page/realName"+"'>认证</a>");
            return;
        }

        //ajax实现异步投资功能的实现
        $.post("/005-money-web/loan/page/invest",{ loanId:loanId, bidMoney: bidMoney}, //具体看要传什么参数，可以对应这表看看需要什么
            function(data){
                if(data.code==1){
                    $("#failurePayment").show();
                    $("#dialog-overlay1").show();
                }else{
                    alert(data.message);
                }
            });

    }

</script>
</body>
</html>